@import '~antd/lib/style/themes/default.less';

@toolbar-box-prefix-cls: antui-toolbar-box;
@toolbar-height: 48px;
// Toolbar styles
// -----------------------------
.@{toolbar-box-prefix-cls} {
  position: relative;
  overflow: hidden;
  min-height: @toolbar-height;
  margin-bottom: 0;
  line-height: 1;
  font-size: 12px;
  border-bottom: 1px solid @border-color-base;
  .top-panel {
    height: @toolbar-height;
    overflow: hidden;
  }

  .left-btn-div {
    display: inline-block;
    height: @toolbar-height;
    padding-top: 8px;
    margin-left: 20px;
    vertical-align: middle;
    position: relative;
    z-index: 1;
    button {
      margin-right: 0px;
    }
  }

  .toolbar-right,
  .pulldown-handle-small {
    position: absolute;
    top: 8px;
    right: 20px;
    height: @toolbar-height;
    transition: transform 0.3s ease-out;
    transform: translateX(0);
  }

  .pulldown-handle-small {
    display: none;
  }

  @media (max-width: 576px) {
    .toolbar-right,
    .pulldown-handle {
      display: none;
    }
    .pulldown-handle-small {
      display: block;
    }
  }

  .toolbar-right-out {
    transform: translateX(120%);
  }

  .pulldown-panel {
    max-height: 0;
    transition: max-height 0.5s ease-out;
    background: #fff;
    // z-index: 7;
    &.open {
      max-height: 400px;
    }
    .pulldown-handle {
      width: 50px;
      height: 10px;
      border: 1px solid @border-color-base;
      border-radius: 4px 4px 0 0;
      border-bottom: none;
      text-align: center;
      line-height: 10px;
      transition: all 0.2s;
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      margin: 0 auto;
      background: #fff;
      box-shadow: 0px 8px 18px -3px #9e9e9e;
      z-index: 2;
      overflow: hidden;
      cursor: pointer;
      span {
        transform: scale(0.7);
        display: flex;
        justify-content: center;
      }
      &:hover {
        width: 60px;
        height: 25px;
        color: @primary-color;
      }
    }
    .pulldown-body {
      margin-top: 0;
      position: relative;
      overflow: hidden;
      background: #f9f9f9;
      border-top: 1px solid @border-color-base;
      padding: 10px;
    }
  }
}
